<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.min.js"></script>-->
<script src="../../../node_modules/markdown-it/dist/markdown-it.js"></script>
<script src="../../../node_modules/markdown-it-attrs/markdown-it-attrs.browser.js"></script>
<div id="markdownbox"></div>
<script>
  var md = window.markdownit();


  md.use(
    window.markdownItAttrs,
    {
      // optional, these are default options
      leftDelimiter: '{',
      rightDelimiter: '}',
      allowedAttributes: []  // empty array = all attributes are allowed
    }
  )

  console.log('md.renderer.rules:',md.renderer.rules);
// md.renderer.rules: Object
//                     code_block: ƒ (tokens, idx, options, env, slf)
//                     code_inline: ƒ (tokens, idx, options, env, slf)
//                     fence: ƒ (tokens, idx, options, env, slf)
//                     hardbreak: ƒ (tokens, idx, options /*, env */)
//                     html_block: ƒ (tokens, idx /*, options, env */)
//                     html_inline: ƒ (tokens, idx /*, options, env */)
//                     image: ƒ (tokens, idx, options, env, slf)
//                     softbreak: ƒ (tokens, idx, options /*, env */)
//                     text: ƒ (tokens, idx /*, options, env */)
//                     [[Prototype]]: Object

  // custom renderer for fences
  md.renderer.rules.fence = function (tokens, idx, options, env, slf) {
    const token = tokens[idx];
    console.log('token:',token);
/*
token: Token
        attrs: Array(1)
          0: (2) ["class", "abcd"]
          length: 1
          [[Prototype]]: Array(0)
        block: true
        children: null
        content: "var a = 1;\n"
        hidden: false
        info: "js"
        level: 0
        map: (2) [1, 4]
        markup: "```"
        meta: null
        nesting: 0
        tag: "code"
        type: "fence"

*/

    return  '<pre' + slf.renderAttrs(token) + '>'
      + '<code>' + token.content + '</code>'
      + '</pre>';
  }
  //todo Read more about custom rendering at markdown-it.
  //  + https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer

  let src = [
    '',
    '```js {.abcd}',
    'var a = 1;',
    '```'
  ].join('\n');
/*
<pre class="abcd"><code>var a = 1;
</code></pre>
*/

  var result = md.render(src);

  console.log('result:',result);

  markdownbox.innerHTML = result;
</script>
</body>
</html>
